<template>
  <div class="login_bg">
    <div class="login_main">
      <div class="login-form">
        <div class="login-header">
          <div class="logo">
            <span style="font-weight: bolder;font-size: 20px;color: #656D78;" >三智云设计</span>
          </div>
        </div>
        <div>
          <div style="width: 300px;">
            <ltext v-model="username" clearable></ltext>
            <div style="height: 20px;"></div>
            <ltext v-model="userpwd" type="password" clearable></ltext>
            <div style="margin-top: 30px;">
              <lbtn   @click="submitForm" type="primary" size="large" style="width: 100%">登 录</lbtn >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import tool from '@/utils/tool.js'
import Cookies from "js-cookie";
export default {
  name: "login",
  data () {
    return {
      username: '',
      userpwd: '',
    }
  },
  mounted() {
    if(tool.Session.get('token')) this.$router.push({name: 'design'});
  },
  methods: {
    submitForm () {
      let obj = {
        username: this.username,
        userpwd: tool.crypto.MD5(this.userpwd)
      }
      tool.post('user/login', obj).then(ret => {
        if (ret.stat) {
          let info = ret.data
          tool.data.setUser(info)
          // 存储 token 到浏览器缓存
          tool.Session.set('token', info.token);
          // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/store/userInfo.ts` 中不同用户登录判断（模拟数据）
          Cookies.set('username', info.username);
          this.$router.push({name: 'design'});
        }
      })
    },
  }
}

</script>

<style scoped lang="scss">
.login_adv {
  width: 33.33333%;
  background-size: cover;
  background: #555 no-repeat center center;
  position: relative;
  .login_adv__title {color: #fff;padding: 40px;position: absolute;top:0;left:0;right: 0;z-index: 2;}
  .login_adv__title h2 {font-size: 40px;}
  .login_adv__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
  .login_adv__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
  .login_adv__title div {margin-top: 10px;display: flex;align-items: center;}
  .login_adv__title div span {margin-right: 15px;}
  .login_adv__title div i {font-size: 40px;}
  .login_adv__title div i.add {font-size: 20px;color: rgba(255,255,255,0.6);}
  .login_adv__bottom {position: absolute;left:0;right: 0;bottom: 0;
    color: #fff;padding: 40px;background-image:linear-gradient(transparent, #000);z-index: 3;
    font-size: 13px;
    &:hover {
      cursor: pointer;
      color: #3BAADC;
    }
  }
  .login_adv__mask {position: absolute;top:0;left:0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 1;}
}
.title {
  position: absolute;top: 10%;left: 0;right: 0;text-align: center;color: #515a6e;
}
.login_main {
  flex: 1;
  overflow: auto;
  display:flex;

  .login-form {
    padding: 0 25px;
    margin: auto;
    //box-shadow: 2px 2px 5px 0 #aaaaaa;
    border-radius: 2px;
    text-align: center;
    .login-header {margin-bottom: 10px; }
    .login-header .logo {display: flex;align-items: center;}
    .login-header .logo img {width: 40px;height: 40px;vertical-align: bottom;margin-right: 10px;}
    .login-header .logo label {font-size: 18px;color: #777777;}
  }
}


</style>
